<template>
  <div>
    <div class="node" v-has="{action: 'price:list', effect: 'move'}">
    <div class="search_box topSelect">
      <div class="searchBox1" style="margin-left: 20px">
         <el-button size="small" plain  icon="el-icon-search" @click="getRate">查询</el-button>    
      </div>
    </div>
   
    <Panel title="费率管理" :intro="intro">
      <div slot='ext' class="examine">
        <el-button v-has="{action: 'price:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>commentDetail()">新增</el-button>
          <form :action="exportUrl" method="POST" target="targetIfr1" >
            <el-button class="button-offt" type="danger"  native-type="submit"  v-has="{action: 'export:adjust:price', effect: 'hide'}" style="margin-left:10px"><i class="el-icon-upload"></i>导出数据</el-button>
          </form>
          <iframe name="targetIfr1" style="display:none"></iframe> 
        <div>
          <el-button type="primary" class="button-offt" v-has="{action: 'import:adjust:price', effect: 'hide'}" @click="()=>importVisible()"  ><i class="el-icon-download"></i>导入数据</el-button>
        </div>
    </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="expand" slot-scope="operation">
      <div class="uesr-table1">
        <el-table
        :data="operation.data"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="">
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="时间"
          width="">
        </el-table-column>
        <el-table-column label="运营商">
          <el-table-column
            label="结算溢价方式"
            width="">
            <template slot-scope="scope">
              <span v-if="scope.row.operatorSettlementServicePrice==1" class="blue-tag" >固定价格</span>
              <span v-else class="denger-tag">百分比</span>
            </template>
          </el-table-column>
          <el-table-column label="电费">
            <el-table-column
              prop="operatorElecPrice"
              label="挂牌价"
              width="">
            </el-table-column>
            <el-table-column
              prop="operatorSettlementElecPrice"
              label="结算价"
              width="">
            </el-table-column>
            <el-table-column
              prop="operatorSettlementElecPremiumVal"
              label="结算溢价值"
              width="">
            </el-table-column>
          </el-table-column>
          <el-table-column label="服务费">
            <el-table-column
              prop="operatorServicePrice"
              label="挂牌价"
              width="">
            </el-table-column>
            <el-table-column
              prop="operatorSettlementServicePrice"
              label="结算价"
              width="">
            </el-table-column>
            <el-table-column
              prop="operatorSettlementServicePremiumVal"
              label="结算溢价值"
              width="">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="平台">
          <el-table-column
            prop="premiumWay"
            label="挂牌溢价方式"
            width="">
            <template slot-scope="scope">
              <span v-if="scope.row.premiumWay==1" class="blue-tag" >固定价格</span>
              <span v-else class="denger-tag">百分比</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="settlementElecPremiumVal"
            label="结算溢价方式"
            width="">
            <template slot-scope="scope">
              <span v-if="scope.row.settlementElecPremiumVal==1" class="blue-tag" >固定价格</span>
              <span v-else class="denger-tag">百分比</span>
            </template>
          </el-table-column>
          <el-table-column label="电费">
            <el-table-column
              prop="elecPrice"
              label="挂牌价"
              width="">
            </el-table-column>
            <el-table-column
              prop="settlementElecPrice"
              label="结算价"
              width="">
            </el-table-column>
            <el-table-column
              prop="settlementElecPremiumVal"
              label="结算溢价值"
              width="">
            </el-table-column>
          </el-table-column>
          <el-table-column label="服务费">
            <el-table-column
              prop="servicePrice"
              label="挂牌价"
              width="">
            </el-table-column>
            <el-table-column
              prop="settlementServicePrice"
              label="结算价"
              width="">
            </el-table-column>
            <el-table-column
              prop="servicePremiumVal"
              label="挂牌溢价值"
              width="">
            </el-table-column>
            <el-table-column
              prop="settlementServicePremiumVal"
              label="结算溢价值"
              width="">
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
      </div>
        </template>
    <template slot="operation" slot-scope="operation">
          <el-button size="mini" icon="el-icon-edit"
            v-has="{action: 'price:update', effect: 'move'}"
            @click="()=>commentDetail(operation.row)"
          >编辑</el-button>
          <el-button size="mini"
          type="warning" 
          @click="copy(operation.row)" 
          icon="el-icon-document-copy"
          >复制</el-button>
          <!-- <el-button size="mini" icon="el-icon-s-operation"
            @click="()=>commentDetail(operation.row)"
          >详情</el-button> -->
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          layout="sizes, prev, pager, next"
          :size="pager.size"
          :pageChange="pageChange"
          :sizeChange="handleSizeChanges"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    <!-- 导入数据 start-->
    <ModalPanel 
      :showFooter="true"
      :visible='visibleImport'
      title="导入数据"
      :onCancel="onCancelImport"
      class="bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
            :hiddenBtn='true'
            :editColumn='editColumnImport'
            :updateData="updateDataImport"
            labelWidth='100px'
            ref="configModal"
            class="ModifyForm"
            :temporaryData='modalData'>
             
            <div slot="urlBox">
              <span>{{url}}</span>
              <el-input v-model="url" type="hidden" placeholder=""></el-input>
            </div>
            <div slot="file">
              <el-button @click="goFile" size="small" type="primary">
              <i class="el-icon-upload2"></i>上传文件
            </el-button>
            <div>{{file}}</div>
            </div>
          </ModifyForm>
        <div>
          <form :action="importUrl" method="post" enctype="multipart/form-data" id="fm1">
            <input type="file" ref="files" style="display:none" name="file" id="fileToUpload" @change="updataFile" accept=".csv,.xls,.xlsx">
            <!-- <input type="text" name="type" value="0"> -->
            <!-- <input type="text" name="token" :value="token"> -->
            <!-- <input type="button" @click="postdata" value="上传" > -->
          </form>
        </div>
      </div>
    </ModalPanel>
    <!-- 导入数据end -->
    <!-- 添加编辑 start-->
    <ModalPanel 
      :visible='visible'
      title="添加/编辑"
      :onCancel="onCancel"
      class="bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='100px'
          ref="configModal"
          class="ModifyForm"
          :temporaryData='modalDataImport'>
        </ModifyForm>
      </div>
    </ModalPanel>
    <!-- 添加编辑end -->

    <!-- 费率 start-->
    <ModalPanel 
      :visible='rate'
      title=""
      width="80%"
      :onCancel="onCancelRate"
      class="bannerDialog"
      :onOk="submit">
      <Panel title="费率详情"  :intro="intro1">
     
    <div slot="body" class="time-input">
        
        
        <!-- <div style="padding: 10px;color: #0072ff;">费率名称：{{modalDataRate.name}}</div> -->
        <!-- <div class="" style="margin: 20px 0;display: flex;align-items: flex-end;background: #e3cca7;padding: 10px;color: #000">
          <div class="input-box">
                 <span class="input-title">平台: <span class="red">*</span> </span>
                 <el-select v-model="thirdId" placeholder="平台">
                   <el-option
                    v-for="item in thirdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </div>
            <div class="input-box">
                 <span class="input-title">峰(电费):</span>
                 <el-input v-model="feng" placeholder="电费"></el-input>
            </div>
            <div class="input-box">
                 <span class="input-title">平(电费):</span>
                 <el-input v-model="ping" placeholder="电费"></el-input>
            </div>
            <div class="input-box">
                 <span class="input-title">谷(电费):</span>
                 <el-input v-model="gu" placeholder="电费"></el-input>
            </div>
            <div class="input-box">
                 <span class="input-title">尖(电费):</span>
                 <el-input v-model="jian" placeholder="电费"></el-input>
            </div>
            <div class="input-box">
                 <span class="input-title">推送服务费:</span>
                 <el-input v-model="tuiService" placeholder="服务费"></el-input>
            </div>
            <div class="input-box">
                 <span class="input-title">结算服务费:</span>
                 <el-input v-model="jieService" placeholder="服务费"></el-input>
            </div>
            <el-button type="primary"  @click="computePrice()" style="margin-left:10px">批量添加</el-button>
        </div> -->
      <el-form :inline="true" class="demo-form-inline" id="formData">
        <div>
          <div class="form-box">
            <el-form-item label="站点" label-width="120px" :required="true">
            <el-select
              filterable
              v-model="stationId"
              clearable
              placeholder="请选择"
            >
              <el-option  v-for="item of siteList"
                :key="item.id"
                :value="item.id"
                :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户组" label-width="120px" :required="true">
            <el-select
              filterable
              v-model="clientUserGroupId"
              clearable
              placeholder="请选择"
            >
              <el-option  v-for="item of userList"
                :key="item.id"
                :value="item.id"
                :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运营商承担优惠" label-width="120px" :required="true">
            <el-select
              v-model="operatorBear"
              placeholder="请选择"
            >
              <el-option :value="true" label="是"></el-option>
              <el-option :value="false" label="否"></el-option>
            </el-select>
          </el-form-item>
          </div>
          <div class="btn0-box">
            <!-- <el-button class="button-offt" type="warning" v-if="modalDataRate.id"  @click="copy()" style="margin-left:10px;margin-bottom:20px" icon="el-icon-document-copy"> 复制数据</el-button> -->
            <el-button class="button-offt" type="primary" size="small"  @click="past()" icon="el-icon-document-checked" style="margin-left:10px;margin-bottom:20px">粘贴</el-button>
            <el-button class="button-offt" type="success" @click="addIds()" style="margin-left:10px;margin-bottom:20px" title="在下面加一行费率组分段" icon="el-icon-plus">加一行</el-button>
          </div>

          <el-table
            :data="formSku.foodSkuSpeciftcations"
            style="width: 100%">
            <el-table-column
              label="开始时间"
              >
              <template slot-scope="scope">
                <div class="input-box1" style="display:flex">
                  <el-input v-model="scope.row.startTime" :disabled="true" placeholder="HH:mm:ss"></el-input>
               </div>
              </template>
            </el-table-column>
            <el-table-column
              label="类型"
              >
              <template slot-scope="scope">
                <div class="input-box1" style="display:flex">
                  <el-select v-model="scope.row.type" placeholder="请选择">
                    <el-option :value="2" label="峰"></el-option>
                    <el-option :value="3" label="平"></el-option>
                    <el-option :value="4" label="谷"></el-option>
                    <el-option :value="1" label="尖"></el-option>
                  </el-select>
               </div>
              </template>
            </el-table-column>
            <el-table-column label="运营商">
              <el-table-column
                label="结算溢价方式"
                width="100">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.operatorSettlementPremiumWay" placeholder="请选择">
                    <el-option
                      v-for="item in stateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="电费">
                <el-table-column
                  prop="operatorElecPrice"
                  label="挂牌价"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.operatorElecPrice" :disabled="true" placeholder="单价"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="结算溢价值"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.operatorSettlementElecPremiumVal" placeholder=""></el-input>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="服务费">
                <el-table-column
                  label="挂牌价"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.operatorServicePrice" :disabled="true" placeholder="单价"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="结算溢价值"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.operatorSettlementServicePremiumVal" placeholder="单价"></el-input>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>

            <el-table-column label="平台">
              <el-table-column
                label="挂牌溢价方式"
                width="100">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.premiumWay" placeholder="请选择">
                    <el-option
                      v-for="item in stateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="结算溢价方式"
                width="100">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.settlementPremiumWay" placeholder="请选择">
                    <el-option
                      v-for="item in stateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="电费">
                <el-table-column
                  label="挂牌溢价值"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.elecPremiumVal" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="结算溢价值"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.settlementElecPremiumVal" placeholder=""></el-input>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="服务费">
                <el-table-column
                  label="挂牌溢价值"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.servicePremiumVal" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="结算溢价值"
                  width="">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.settlementServicePremiumVal" placeholder=""></el-input>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>

            <!-- <el-table-column
              label="运营商挂牌电费"
              width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="单价"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="运营商挂牌服务费"
              width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.electric" placeholder="电费"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="运营商结算溢价方式"
              width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.state" placeholder="状态">
                   <el-option
                    v-for="item in stateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="运营商结算电费溢价值"
              width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.service" placeholder="服务费"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="运营商结算服务费溢价值"
              width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.discount" placeholder="折扣"></el-input>
              </template>
            </el-table-column> -->

            <!-- <el-table-column
              label="平台挂牌溢价方式"
              width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.state" placeholder="状态">
                   <el-option
                    v-for="item in stateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="平台挂牌电费溢价值"
              width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.powerPremium" placeholder="电费溢价"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="平台挂牌服务费溢价值"
              width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.servicePremium" placeholder="服务费溢价"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="类型"
              width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" placeholder="类型">
                   <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column> -->
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button  type="danger"  @click="deleteIds(scope.$index)" icon="el-icon-close" >删除行</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>
   
    </Panel>
    </ModalPanel>
    <!-- 费率 end -->
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'price:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";

import axios from 'axios'
export default {
  name: "group",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModifyForm,
    ModalPanel
  },
  data() {
    return {
      visibleImport: false,
      modalDataImport:{},
      importUrl: this.$baseUrl+"/import/adjust/price",
      file: '',
      token: localStorage.getItem('user_token'),
      exportUrl:  this.$baseUrl+"/export/adjust/price?token="+localStorage.getItem('user_token'),
      url: "",
      intro:{
        title: '费率组',
        content: `<p><strong>费率组是可以设置一条可自定义的不同时间段不同价格的充电收费计价规则</strong></p><p><strong> 具体配置详情，请在新增费率组后编辑 ‘费率组分段’</strong></p><p><br></p>`
      },
      intro1:{
        title: '费率组分段设置',
        content: `<p><strong>批量填入数据操作说明：</strong></p><ol><li>峰平谷价格<strong>必填</strong>；<u>当推送服务费和结算服务费未填入时，代表</u><strong><u>不修改</u></strong><u>费率服务费。推送服务费和结算服务费必须同时存在</u>；推送服务费将填入下面的费率分段服务费。</li></ol><p><strong>服务费溢价计算规则：</strong></p><ol><li>快电/新电途：服务费溢价 = -(推送服务费-结算服务费)；</li><li>星络充：服务费溢价 = -(电费+结算服务费)*0.031+(推送服务费-结算服务费)</li></ol>`
      },
      // intro:'',
      tableData: [],
      query: {
        page: 1
      },
      pager: {
        component: 'groupIndex',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      searchs:{
        component: 'groupIndex',
        state: '',
        name: '',
      },
      //费率start
      siteList:[],
      userList:[],
      rateId: '',
      stationId:'',
      clientUserGroupId:'',
      operatorBear: false,
      rate:false,
      modalDataRate:{},
      state: '',
      total: 1,
      maxseconed:86400,
      formSku: {
        foodSkuSpeciftcations: [],
      },
      name:'',
      time:'',
      beginTime:'',
      endTime:'',
      thirdId: '',
      feng: '',
      ping: '',
      gu: '',
      jian:'',
      tuiService: '',
      jieService: '',
      typeList:[
        {value: 1,label: '谷'},
        {value: 2,label: '峰'},
        {value: 3,label: '平'},
        {value: 4,label: '尖'}
      ],
      thirdList: [
        {value: '',label: '请选择平台'},
        {value: 1,label: '快电'},
        {value: 2,label: '新电途'},
        {value: 3,label: '星络充'},
      ],
       stateList:[
        {value: 1,label: '固定价格'},
        {value: 2,label: '百分比'},
      ],
      dataItem:{'beginTime':'','endTime':'','electric':'','servicePremium':'','powerPremium':'','name':'','service':'','discount':'','state':'','type':'','times':new Date(2016, 9, 0, 0, 0),'rang':{selectableRange: '00:00:00 - 23:59:59'}},
      timeData:[
        {'beginTime':'','endTime':'','electric':'','servicePremium':'','powerPremium':'','name':'阶段一','service':'','discount':'','state':'','type':'','times':new Date(2016, 9, 0, 0, 0),'rang':{selectableRange: '00:00:00 - 23:59:59'}}
        ],
      visible:false,
      modalData:{},
      tableData: [],
      gid:'',
      //费率end
      //添加编辑
      edit: false,
      visible:false,
      modalData:{},
      editColumn: [
        {
          name: "费率组名称",
          prop: "name",
          type: "text",
          width:24,
          required: true
        },
        {
          name: "状态",
          prop: "state",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':1,'name':'启用'},{'id':0,'name':'停用'}],
          onChange: () => {},
          required:true,
          width:24
        },
        {
          name: "备注",
          width: 24,
          prop: "mark",
          type: "text",
          required: false
        },
      ],
       editColumnImport: [
      
        {
          name: "上传文件",
          prop: "file",
          type: "other",
          width:24,
          required: false,
          slotName: 'file',
          desc: '文件格式仅限.csv,.xls,.xlsx'
        },
        {
          name: "类型",
          prop: "type",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': 0,'name': "电费"},{'id':1, 'name':"服务费"},{'id':2, 'name':"折扣"},{'id':3, 'name':"电费溢价"},{'id':4, 'name':"服务费溢价"}],
          width:24,
          required: true,
          onChange :() => {

          }
        },
        
        
        
      ],
      //添加编辑end
    };
  },
   watch: {
    'formSku.foodSkuSpeciftcations':{
      handler: function () {
        console.log('77777777777777')
      },
      deep: true,
    },
  },
  created(){
   console.log(this.exportUrl)
  },
  mounted() {
    // this.searchsFnc()
    this.getRate();
    this.getSite()
    this.getuser()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "编号",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "充电站名称",
            type: "text",
            prop: "stationName",
            align: "center"
          },
          {
            label: "用户组名",
            type: "text",
            prop: "name",
            align: "center"
          },
          {
            label: "用户类型",
            type: "other",
            prop: "type",
            align: "center",
            fnc: val => val == 100 ? "原价用户" : val ==200 ? "普通用户": val ==300 ? 'VIP用户': val ==400 ? '车队用户': val ==500 ? '互联互通': "未知",
          },
          {
            label: "运营商名称",
            type: "text",
            prop: "operatorName",
            align: "center"
          },
          {
            label: "运营商承担优惠",
            type: "other",
            prop: "operatorBear",
            align: "center",
            fnc: val => val  ? "是" : "否",
            class:val => val  ? "agree" : "cancel" ,
          },
          {
            label: "费率明细",
            type: "expand",
            prop: "priceDetailResps",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:240
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    updataFile(e){
      var data= document.getElementById('fileToUpload').value
      console.log(document.getElementById('fileToUpload').value, )
      this.file = data
    },
    async getdata() {
      let  type  = 0,  file = ''
      let search = objectFilter({type , file })
      const res = await request({
        url: "/export/adjust/price",
        method: "POST",
        data: search
      });
    },
    postdata(){
      var form1 = document.getElementById("fm1");
      var token = this.token;
      var formData = new FormData(form1);
        axios.post("/api/export/adjust/price", formData, {
            headers: {
              "token": token,
            },
        }).then((res) => {
            console.log(res);
        })
        .catch((err) => {
            console.log(err);
        });
    },
    async getRate() {
      let current = this.pager.current
      let size = this.pager.size
      let search = objectFilter({ current ,size})
      const res = await request({
        url: "/manage/price/query",
        method: "POST",
        data: search
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
    },
    pageChange(val) {
      this.pager.current = val;
      this.getRate();
    },
    handleSizeChanges(val){
      console.log(val)
      this.pager.current = 1;
      this.pager.size = val;
    },
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.query.page = 1;
    },

    goFile(){
       let file = this.$refs.files
       file.click()
    },
    importVisible(){
       this.visibleImport = true
    },
    onCancelImport(){
      this.visibleImport = false
      this.file = ''
      document.getElementById('fileToUpload').value = ''
    },
     async updateDataImport(values){
      var file= document.getElementById('fileToUpload').files[0]
      if(!file){
        this.$message.error('请选择文件')
      }
      let { type } = values
      const formData = new FormData();
      formData.append('file', file);
      formData.append('type', type);
     let url, msg
     url = '/import/adjust/price'
      msg = '导入成功'
     
      let res = await request({
        url: url,
        method: "POST",
        data: formData
      });
     if(res.code !==0) return
      this.$message.success(msg)
      this.getRate();
    },
   
    //添加编辑start
    async getSite(){
      const res = await request({
        url: "/manage/station/select",
        method: "POST",
      });
      this.siteList = res.data
    },
    async getuser(){
      const res = await request({
        url: "/manage/client/user/group/select",
        method: "POST",
      });
      this.userList = res.data
    },
    async editStore(rowData){
      if(rowData){
        this.modalDataImport = {...rowData}
      }else{
        this.modalDataImport ={}
      }
      this.visible = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancel(){
      this.visible = false
    },
    async updateData(values){
     const { name, mark, state, id } = values
     let url, msg
     if(id){
        url = '/manage/price/update'
        msg = '编辑成功'
     }else{
        url = '/manage/price/add'
        msg = '添加成功'
     }
      let res = await request({
        url: url,
        method: "POST",
        data: { name, mark, state, id }
      });
     if(res.code !==0) return
      this.$message.success(msg)
      this.visible = false
      this.getRate();
    },
    //费率start
    copy(row){
      this.$store.commit('copyTimeDate', row)
      console.log('this.$store.getters.timeData',row)
      this.$message.success('复制成功')
    },
    past(){
      let timeData = this.$store.getters.timeData
      console.log('timeData',timeData)
      this.formSku.foodSkuSpeciftcations = timeData.priceDetailResps
    },
    async getRateTime(id) {
      const res = await request({
        url: "/rate/group/time/list/"+ id,
        method: "GET",
        data: {}
      });
      this.formSku.foodSkuSpeciftcations = res.list
      res.list.map((item,index) => {
        if(index==0){
          this.tuiService = item.service
        }
        if(item.type==1){
          this.gu = item.electric //谷
        }
        if(item.type==2 || item.type==4){
          this.feng = item.electric //峰
        }
        if(item.type==4){
          this.jian = item.electric //尖
        }
        if(item.type==3){
          this.ping = item.electric //平
        }
      })
    
    },
    commentDetail(rowData){
      // this.getRateTime(rowData.id)
      if(rowData){
        console.log('rowData',rowData)
        this.formSku.foodSkuSpeciftcations = rowData.priceDetailResps
        this.modalDataRate = {...rowData}
        this.stationId = rowData.stationId
        this.clientUserGroupId = rowData.clientUserGroupId
        this.operatorBear = rowData.operatorBear
      }else{
        this.stationId ='',
        this.clientUserGroupId =''
        this.operatorBear = ''
      }
      this.rate = true
    },
    onCancelRate(){
      this.rate = false
    },
    computePrice(){
      let gu = parseFloat(this.gu), ping = parseFloat(this.ping), feng = parseFloat(this.feng),jian = parseFloat(this.jian), jieService =this.jieService? parseFloat(this.jieService): 0, tuiService =this.tuiService? parseFloat(this.tuiService):0, thirdId = this.thirdId
      if(!thirdId || !feng || !ping || !gu ){
        this.$message.error('请完善计算前的所有空格')
        return
      }
      let guOutPrice = 0, pingOutPrice = 0, fengOutPrice = 0, jianOutPrice = 0
      if(thirdId =='3'){
        //星络充
        guOutPrice = -((gu + jieService)*0.031 + (tuiService - jieService)).toFixed(3)
        pingOutPrice = -((ping + jieService)*0.031 + (tuiService - jieService)).toFixed(3)
        fengOutPrice = -((feng + jieService)*0.031 + (tuiService - jieService)).toFixed(3)
        jianOutPrice = -((jian + jieService)*0.031 + (tuiService - jieService)).toFixed(3)
      }else{
        //快电，新电途
        var pti = -(tuiService - jieService).toFixed(3)
        guOutPrice = pti
        pingOutPrice = pti
        fengOutPrice = pti
        jianOutPrice = pti
      }
      let data = this.formSku.foodSkuSpeciftcations
      let this_ = this
      data.map((item, index) => {
        if(!item.type){
          this_.$message.error('类型不能为空')
          return false
        }
        item.electric = item.type == 1 ? gu: item.type == 3 ? ping :item.type==2? feng: jian
        item.service = tuiService
        if(jieService&& tuiService){
          item.servicePremium = item.type == 1 ? guOutPrice: item.type == 3 ? pingOutPrice: item.type == 2 ? fengOutPrice: jianOutPrice
        }
        
        return item
      })
      this.formSku.foodSkuSpeciftcations = data
    },
    async submit() {
      let priceDetailAddReqs = this.formSku.foodSkuSpeciftcations
      if (!priceDetailAddReqs) return this.$message.error('至少包含一条数据')
      priceDetailAddReqs.map((item, index) => {
        if(!item.startTime || !item.type) return this.$message.error('请完善表格数据')
        return item
      })
      let stationId =this.stationId
      let clientUserGroupId =this.clientUserGroupId
      let operatorBear =this.operatorBear
      let id = this.rateId
      if(id){
        var post = { operatorBear, stationId, clientUserGroupId,id,  priceDetailAddReqs}
      }else{
        var post = { operatorBear, stationId, clientUserGroupId,  priceDetailAddReqs}
      }
      let res = await request({
      url: '/manage/price/add',
      method: 'POST',
      data: post
      })
      if (res.code !==200) return
      this.$message.success('提交成功')
      this.rate = false
      this.rateId = ''
      this.stationId ='',
      this.clientUserGroupId =''
      this.operatorBear = ''
      // this.getQueryData();

    },
    addIds(){
      this.formSku.foodSkuSpeciftcations.push({})
    },
    deleteIds(index) {
      this.formSku.foodSkuSpeciftcations.splice(index, 1)
    },
    //费率end

    //添加编辑end
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        const del = await request({
        url: "/grate/group/delete",
        dataType: 'json',
        method: "POST",
        data: [id]
      });
        if(del.code !==0) return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getRate()
      })
    },
  }
}
</script>
<style lang='scss' scope>
.user-td1{
  display: flex;
  flex-direction: column;
}

.noshow{
  display: none;
}
.input-title{
  font-size: 14px;
    color: #000000;
    display: flex;
    align-items: center;
}
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--timerange{
  width: 201px;
}
.input-box {
    margin-left: 8px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 130px
}
.input-box1 {
  display: flex;
  align-items: center;
}
.input-box1_table{
display: flex;
}

.text-box {
  .el-input {
    width: 80px;
  }
  .el-row {
    margin-bottom: 10px;
  }
}
.red {
  color: red;
}
.exportbox {
    display: flex;
    justify-content: flex-end;
    background: #fff;
    padding-bottom: 5px;
}
.export {
    color: #FFF;
    background-color: #F56C6C;
    border-color: #F56C6C;
    border: 1px solid #F56C6C;
    border-radius: 5px;
    padding: 10px;
}
.el-table thead.is-group th {
    background: #cdc89f !important;
}
.uesr-table1{
  padding: 40px ;
}
.el-table__expanded-cell[class*=cell] {
    // background: #cdc89f;
}
.btn0-box{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.form-box{
  display: flex;
  flex-direction: column;
}
</style>